<template>
	<div class="container">
		<lay-out  titleName="设置">
			<div slot="content">
				<view class='personal-data'>
					<view class='list'>
						<view class='item'>
							<view>头像</view>
							<view class="avatar-box" @click='uploadpic'>
								<image :src="customerServerData.avatar"></image>
							</view>
						</view>
						<view class='item'>
							<view>昵称</view>
							<view class='input'><input v-model="customerServerData.nickname" type='text' placeholder="请输入客服名称"></input></view>
						</view>
						<view class='item'>
							<view>手机号</view>
							<view class='input'>
								<view class='input'><input v-model="customerServerData.phone" type='number' placeholder="请填写联系方式"></input></view>
							</view>
						</view>
						<view class="item">
							<view>密码</view>
							<view class='input'>
								<view class='input'><input v-model="customerServerData.password" type='number' placeholder="请输入密码"></input></view>
							</view>
						</view>
					</view>
				</view>
			</div>
		</lay-out>
	</div>
</template>

<script>
	import { navigateTo, chooseImage, pathToBase64 , Toast, Modal, Loading, hideLoading} from 'pages/utils/uniApi.js';
	import http from 'pages/api/index';
	import api from 'pages/api/api.js';
	import { mapState } from 'vuex'
	const app = getApp()
	export default {
		data() {
			return {
				dominName: '',
				customerServerData: {}
			}
		},
		computed:{
			...mapState(['token'])
		},
		onLoad(opt) {
			this.initData()
			this.dominName = this.$cache.get('dominName');
		},
		onNavigationBarButtonTap() {
			this.handleEdit();
		},
		methods: {
			edit(){
				uni.navigateTo({
					url:'/pages/view/example'
				})
			},
			// 修改域名
			editDominName() {
				navigateTo(3, '/pages/view/dominName/index');
			},
			// 获取当前登录客服信息
			initData() {
				http(api.userUserInfo).then(res => {
					this.customerServerData = res;
					console.log(this.customerServerData);
				});
			},
			// 发送图片
			uploadpic() {
				let that = this;
				chooseImage(1).then(res => {
					//#ifndef H5
					uni.compressImage({
						src: res.tempFilePaths[0],
						width: 'auto',
						height: 'auto',
						success(res) {
							console.log('ok');
							that.upload(res.tempFilePath);
						},
						fail(e) {
							console.log(e,'error');
							that.upload(res.tempFilePaths[0]);
						}
					});
					//#endif
					//#ifdef H5
					that.upload(res.tempFilePaths[0]);
					//#endif
				});
			},
			upload(tempFilePath) {
				uni.uploadFile({
					url: app.globalData.http + api.kefuUploadAvatar.url,
					filePath: tempFilePath,
					name: 'file',
					formData: {
						// file: res.tempFilePaths[0],
						filename: 'file'
					},
					header: {
						// #ifdef MP || APP-PLUS
						'Content-Type': 'multipart/form-data',
						// #endif
						'Authori-zation': 'Bearer ' + this.token
					},
					success: uploadFileRes => {
						console.log(uploadFileRes)
						let unloadResponse = JSON.parse(uploadFileRes.data);
						if (unloadResponse.status == 200) {
							this.customerServerData.avatar = unloadResponse.data.url;
						}
					},
					fail: res => {
						Toast('上传图片失败');
					},
					complete: res => {
						console.log(res);
					}
				});
			},
			// 确定修改
			handleEdit() {
			
				let postData = this.customerServerData;
				if(!postData.password) {
					postData.password = '******'
				}
				http(api.putKefuUserUserInfo, postData).then(res => {
					Toast('修改成功');
					this.initData();
				})
			},
			// 退出登录
			loginOut() {
				http(api.userLogout).then(res => {
					Modal('温馨提示', '您确定要退出登录吗?').then(() => {
						navigateTo(3, '/pages/view/login/index');
					});
				});
			}

		}
	}
</script>

<style scoped lang="less">
	.personal-data {
		background-color: #fff;
		// padding-bottom: 60rpx;
	}

	.personal-data .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapList .item.on {
		border-color: #e93323;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid #e93323;
	}

	.personal-data .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		// margin-top: 15rpx;
		background-color: #fff;
		
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}
	
	.personal-data .list .item .inputs {
		// width: 415rpx;
		text-align: right;
		color: #868686;
		display: flex;
		justify-content: right;
		align-items: center;
	}

	.personal-data .list .item .inputs .iconfont {
		font-size: 35rpx;
		margin-left: 30rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
		background: #3875EA;
		border-radius: 45rpx;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
		border: 1rpx solid #3875EA;
		color: #3875EA;
	}

	.avatar-box {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>
